<!-- Script to show date pickers -->
<SCRIPT TYPE="text/javascript">
    $(function () {
        var dates = $("#from, #to")
                .datepicker(
                {
                    changeMonth:true,
                    numberOfMonths:1,
                    onSelect:function (selectedDate) {
                        var option = this.id == "from" ? "minDate"
                                : "maxDate", instance = $(this).data(
                                "datepicker"), date = $.datepicker
                                .parseDate(
                                instance.settings.dateFormat
                                        || $.datepicker._defaults.dateFormat,
                                selectedDate, instance.settings);
                        dates.not(this).datepicker("option", option,
                                date);
                    }
                });
    });
</SCRIPT>

<FORM METHOD="post" NAME="report_form" ID="report_form" ACTION="">
    <DIV CLASS="demo">
        <LABEL FOR="from">From</LABEL>
        <INPUT TYPE="text" ID="from" NAME="from" VALUE="{{ from }}"/>
        <LABEL FOR="to">To</LABEL>
        <INPUT TYPE="text" ID="to" NAME="to" VALUE="{{ to }}"/>
        <INPUT TYPE="submit" NAME="submit" VALUE="show report"/>
    </DIV>
</FORM>

<DIV CLASS="demo-description">
    <P>Select the date range to search for.</P>
</DIV>

{% ifequal request.environ.REQUEST_METHOD "POST" %}
<TABLE STYLE="text-align: left; width: 20%;" BORDER="1" CELLPADDING="3"
       CELLSPACING="0">
    <TBODY>
    <TR>
        <TD nowrap="nowrap">Date</TD>
        <TD nowrap="nowrap">Project</TD>
        <TD colspan="1">Hours</TD>
    </TR>
    {% for row in table_rows %}
    {% for r in row.project_sums %}
    <TR>
        <TD nowrap="nowrap">{{ row.date }}</TD>
        <TD nowrap="nowrap">{{ r.project }}</TD>
        <TD>{{ r.sum }}</TD>
        <!-- <TD><A HREF="/edit?punch={{ row.punch_id }}">edit</A> -->
        </TD>
    </TR>
    {% endfor %}
    {% endfor %}
    </TBODY>
</TABLE>
<BR/>
<TABLE STYLE="text-align: left; width: 20%;" BORDER="1" CELLPADDING="3"
       CELLSPACING="0">
    <TBODY>
    <TR>
        <TD nowrap="nowrap">Project</TD>
        <TD nowrap="nowrap">Total Hours</TD>
    </TR>
    {% for row in table_sums %}
    <TR>
        <TD nowrap="nowrap">{{ row.project }}</TD>
        <TD nowrap="nowrap">{{ row.sum }}</TD>
        </TD>
    </TR>
    {% endfor %}
    <TR>
        <TD nowrap="nowrap">Grand Total</TD>
        <TD nowrap="nowrap">{{ grand_sum }}</TD>
    </TR>
    </TBODY>
</TABLE>
{% endifequal %}
